<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品功能介绍 - UserHub</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <link rel="stylesheet" href="video-integration.css">
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="dashboard.html" class="flex items-center">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </a>
                </div>
                <div class="flex items-center">
                    <button id="mobile-menu-button" class="lg:hidden p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100">
                        <i class="fa fa-bars"></i>
                    </button>
                    <div class="hidden lg:flex items-center space-x-4">
                        <a href="dashboard.html" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">首页</a>
                        <a href="tutorials.html" class="text-primary border-b-2 border-primary px-3 py-2 text-sm font-medium">教程</a>
                        <a href="help-center.html" class="text-gray-700 hover:text-primary px-3 py-2 text-sm font-medium">帮助中心</a>
                        <div class="relative ml-3">
                            <div>
                                <button class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                                    <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/64/200/200" alt="用户头像">
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面导航 -->
        <div class="mb-8">
            <div class="flex items-center text-sm text-gray-500 mb-2">
                <a href="dashboard.html" class="hover:text-primary">首页</a>
                <i class="fa fa-chevron-right text-xs mx-2"></i>
                <a href="dashboard.html#videos-section" class="hover:text-primary">视频内容</a>
                <i class="fa fa-chevron-right text-xs mx-2"></i>
                <span class="text-gray-700" id="current-page">集成服务使用方法</span>
            </div>
        </div>
        
        <!-- 视频播放与介绍区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 视频播放器 -->
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                    <div class="relative aspect-video bg-gray-900">
                        <video id="main-video" class="w-full h-full object-cover" controls poster="https://picsum.photos/id/1040/1200/675">
                            您的浏览器不支持视频播放
                        </video>
                        <div id="video-placeholder" class="absolute inset-0 flex flex-col items-center justify-center text-white">
                            <button id="play-video" class="w-16 h-16 rounded-full bg-primary/90 flex items-center justify-center mb-4 hover:bg-primary transition-colors">
                                <i class="fa fa-play text-xl"></i>
                            </button>
                            <p class="text-center px-4">点击播放视频</p>
                        </div>
                    </div>
                    <div class="p-6">
                        <h1 class="text-2xl font-bold mb-2" id="video-title">集成服务使用方法</h1>
                        <div class="flex items-center text-sm text-gray-500 mb-4">
                            <span id="video-duration">07:12</span>
                            <span class="mx-2">•</span>
                            <span>更新于 2025-09-09</span>
                        </div>
                        <div class="prose max-w-none text-gray-700" id="video-description">
                            本视频将详细介绍如何连接和使用第三方集成服务，包括授权流程、数据同步设置以及常见问题解决方法。通过这些集成服务，您可以扩展平台功能，提升工作效率，实现数据互通。
                        </div>
                    </div>
                </div>
                
                <!-- 视频章节 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                    <div class="p-6 border-b border-gray-100">
                        <h3 class="text-lg font-semibold">视频章节</h3>
                    </div>
                    <div class="divide-y divide-gray-100">
                        <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer flex items-center">
                            <span class="text-primary font-medium w-8">01</span>
                            <div class="ml-4 flex-grow">
                                <h4 class="font-medium">集成服务介绍</h4>
                                <p class="text-sm text-gray-500">了解支持的第三方服务及集成优势</p>
                            </div>
                            <span class="text-sm text-gray-500">01:15</span>
                        </div>
                        <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer flex items-center">
                            <span class="text-primary font-medium w-8">02</span>
                            <div class="ml-4 flex-grow">
                                <h4 class="font-medium">授权与连接步骤</h4>
                                <p class="text-sm text-gray-500">详细的服务连接和授权流程</p>
                            </div>
                            <span class="text-sm text-gray-500">02:30</span>
                        </div>
                        <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer flex items-center">
                            <span class="text-primary font-medium w-8">03</span>
                            <div class="ml-4 flex-grow">
                                <h4 class="font-medium">数据同步与管理</h4>
                                <p class="text-sm text-gray-500">设置同步选项和管理集成数据</p>
                            </div>
                            <span class="text-sm text-gray-500">02:15</span>
                        </div>
                        <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer flex items-center">
                            <span class="text-primary font-medium w-8">04</span>
                            <div class="ml-4 flex-grow">
                                <h4 class="font-medium">常见问题与解决方案</h4>
                                <p class="text-sm text-gray-500">解决集成过程中可能遇到的问题</p>
                            </div>
                            <span class="text-sm text-gray-500">01:12</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="lg:col-span-1">
                <!-- 相关视频 -->
                <div class="bg-white rounded-xl shadow-sm overflow-hidden sticky top-24">
                    <div class="p-6 border-b border-gray-100">
                        <h3 class="text-lg font-semibold">相关视频</h3>
                    </div>
                    <div class="divide-y divide-gray-100">
                        <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer">
                            <a href="video-features.html" class="flex gap-3">
                                <div class="relative w-24 h-16 flex-shrink-0">
                                    <img src="屏幕截图 2025-09-09 152735.png" alt="产品功能介绍与使用指南" class="w-full h-full object-cover rounded-lg">
                                    <div class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">
                                        00:25
                                    </div>
                                </div>
                                <div>
                                    <h4 class="font-medium text-sm line-clamp-2">产品功能介绍与使用指南</h4>
                                </div>
                            </a>
                        </div>
                        <div class="p-4 hover:bg-gray-50 transition-colors cursor-pointer">
                            <a href="video-security.html" class="flex gap-3">
                                <div class="relative w-24 h-16 flex-shrink-0">
                                    <img src="屏幕截图 2025-09-09 182503.png" alt="账户安全设置教程" class="w-full h-full object-cover rounded-lg">
                                    <div class="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 py-0.5 rounded">
                                        00:10
                                    </div>
                                </div>
                                <div>
                                    <h4 class="font-medium text-sm line-clamp-2">账户安全设置教程</h4>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </div>
                    <p class="text-sm text-gray-500 mb-4">
                        为团队提供高效协作与用户管理的一体化平台，提升工作效率与用户体验。
                    </p>
                    <div class="flex space-x-4">
                       <a href="https://weixin.qq.com" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微信">
                    <i class="fa fa-weixin text-xl"></i>
                    </a>
                    <a href="https://im.qq.com/index" class="text-gray-400 hover:text-primary transition-colors duration-200" title="QQ">
                        <i class="fa fa-qq text-xl"></i>
                    </a>
                    <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F" class="text-gray-400 hover:text-primary transition-colors duration-200" title="微博">
                        <i class="fa fa-weibo text-xl"></i>
                    </a>
                
                    </div>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">资源</h3>
                    <ul class="space-y-2">
                        <li><a href="tutorials.html" class="text-sm text-gray-500 hover:text-primary">视频教程</a></li>
                        <li><a href="help-center.html" class="text-sm text-gray-500 hover:text-primary">帮助中心</a></li>
                        <li><a href="#" class="text-sm text-gray-500 hover:text-primary">API文档</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 tracking-wider uppercase mb-4">公司</h3>
                    <ul class="space-y-2">
                        <li><a href="settings-about.html" class="text-sm text-gray-500 hover:text-primary">关于我们</a></li>
                        <li><a href="#" class="text-sm text-gray-500 hover:text-primary">联系我们</a></li>
                        <li><a href="privacy-policy.html" class="text-sm text-gray-500 hover:text-primary">隐私政策</a></li>
                    </ul>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-200">
                <p class="text-sm text-gray-500 text-center">
                    &copy; 2025 UserHub. 保留所有权利.
                </p>
            </div>
        </div>
    </footer>
    <script src="video-integration.js"></script>
    </body>
</html>
